<template>
  <div class="page-wrapper d-flex flex-column">
    <div class="top d-flex flex-column ov-hidden">
      <div class="header d-flex jc-between ai-center">
        <div class="title d-flex ai-center jc-center">
          <div class="divider"></div>
          {{$t('wangluoshezhi.wangluoshezhi')}}
        </div>
        <div class="divider"></div>
      </div>
      <MyTable :data="tableData" stripe style="width: 100%">
        <el-table-column :label="$t('wangluoshezhi.wangkou')" prop="networkPort"></el-table-column>
        <el-table-column :label="$t('wangluoshezhi.autoGet')"  prop="ip_method_text"></el-table-column>
        <el-table-column :label="$t('wangluoshezhi.ipAddr')"   prop="ip"></el-table-column>
        <el-table-column :label="$t('wangluoshezhi.subnetmask')"   prop="netmask"></el-table-column>
        <el-table-column :label="$t('wangluoshezhi.gateway')"   prop="gateway"></el-table-column>
        <el-table-column :label="$t('wangluoshezhi.macAddr')"  prop="hw_addr"></el-table-column>
        <el-table-column  :label="$t('common.operate')" >
          <template slot-scope="scope">
            <MyButton class="text" type="text" size="small" @click="handleEdit(scope.row)">{{$t('common.edit')}}</MyButton>
          </template>
        </el-table-column>
      </MyTable>
    </div>
    <div class="middle flex-1 d-flex jc-between ai-start mt-20">
      <div class="midle-left flex-1 mr-10">
        <div class="header d-flex jc-between ai-center">
          <div class="title d-flex ai-center jc-center">
            <div class="divider"></div>
            {{$t('wangluoshezhi.dnsfuwuqi')}}
          </div>
          <div class="divider"></div>
        </div>
        <el-form :model="formData">
          <el-form-item :label="$t('wangluoshezhi.dnshuoqufangshi')" prop="dns_method">
            <el-select v-model="formData.dns_method"  :disabled="formData.dns_method==='static'">
              <el-option
                v-for="item in methodList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('wangluoshezhi.shouxuandns')" prop="first_dns">
            <NetworkInput :disabled="formData.dns_method === 'dhcp'" v-model="formData.first_dns" />
          </el-form-item>
          <el-form-item :label="$t('wangluoshezhi.beixuandns')" prop="second_dns">
            <NetworkInput :disabled="formData.dns_method === 'dhcp'" v-model="formData.second_dns" />
          </el-form-item>
        </el-form>
      </div>
      <div class="midle-right flex-1">
        <div class="header d-flex jc-between ai-center">
          <div class="title d-flex ai-center jc-center">
            <div class="divider"></div>
            {{$t('wangluoshezhi.morenwangka')}}
          </div>
          <div class="divider"></div>
        </div>
        <el-form :model="formData">
          <el-form-item :label="$t('wangluoshezhi.shiyongwangluojiekoushezhi')" prop="ethname">
            <el-select v-model="formData.ethname" @change="handleEthnameChange">
              <el-option
                v-for="[key,value] in Object.entries(networkPortMap)"
                :key="key"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bottom d-flex jc-center ai-center mt-20 mb-50">
      <MyButton class="add" @click="getNetwork ">{{$t('common.refresh')}}</MyButton>
      <MyButton class="confirm ml-20" @click="handleSubmit">{{$t('common.confirm')}}</MyButton>
    </div>
    <EditDialog :visible.sync="isEditShow" :row="row" @refresh="getNetwork" />
  </div>
</template>

<script>
import MyButton from "@/components/Button.vue";
import { setServer , getNetwork } from "./service";
import EditDialog from "./EditNetworkDialog.vue";
import NetworkInput from "@/components/input/Network.vue";
import util from "@/utils";
export default {
  components: {
    MyButton,
    EditDialog,
    NetworkInput
  },
  data() {
    return {
      tableData: [],
      isEditShow: false,
      row: {},
      networkPortMap: {
        eth1: "LAN2",
        eth0: "LAN1"
      },
      formData:{},
      methodList:[
        {label: this.$t('wangluoshezhi.autoGet'), value: 'dhcp'},
        {label: this.$t('wangluoshezhi.manualGet'), value: 'static'}
      ],
      ipMethodMap:{
        'dhcp': this.$t('common.yes'),
        'static':this.$t('common.no')
      }
    };
  },
  mounted() {
    this.getNetwork();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    async handleSubmit() {
      const params = {
        ...this.formData,
      };
      let res = await setServer(params);
      if(res.code == 0) {
        util.msg.success('edit_success')
      }
    },
    handleEdit(row) {
      this.isEditShow = true;
    this.row = {...row};
    },
    async getNetwork() {
      let res = await getNetwork();
      this.tableData = res.data.ethernet.map((item) => {
        return {
          ...item,
          networkPort: this.networkPortMap[item.ethname],
          ip_method_text: this.ipMethodMap[item.ip_method]
        };
      });
      this.formData = {
        ...res.data.default_info
      }
      // this.formData2 = {

      // }
    },
    handleEthnameChange(val) {
      this.formData.dns_method = this.tableData.find(item => item.ethname === val).ip_method
    }
  }
};
</script>

<style lang="less" scoped>
.page-wrapper {
  height: 100%;
  .header {
    background: #fafafc;
    border-radius: 20px 20px 0 0;
    height: 56px;
    padding: 0 20px;
    .title {
      font-size: 20px;
      .divider {
        background-image: linear-gradient(
          180deg,
          rgba(45, 204, 112, 1) 0,
          rgba(52, 152, 219, 1) 100%
        );
        border-radius: 4px;
        width: 4px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
  .middle {
    background:#fff;
    /deep/ .el-form {
      padding:20px;
      width:60%;
      margin:0 auto;
    }
  }
}
</style>